/**
 * 选择颜色、类别、描述
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Popover, message } from 'antd';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './index.less';

class PrivateData {
  static typeMap = new Map()
    .set(1, { text: '颜色', width: 290 })
    .set(2, { text: '类别', width: 970 })
    .set(3, { text: '描述', width: 540 });
  static colorArr = [
    { value: 'WT', text: '白色', imgUrl: require('../images/color/wt.png') },
    { value: 'BK', text: '黑色', imgUrl: require('../images/color/bk.png') },
    { value: 'GY', text: '灰色', imgUrl: require('../images/color/gy.png') },
    { value: 'BU', text: '蓝色', imgUrl: require('../images/color/bu.png') },
    { value: 'RD', text: '红色', imgUrl: require('../images/color/rd.png') },
    { value: 'YW', text: '黄色', imgUrl: require('../images/color/yw.png') },
    { value: 'BE', text: '米色', imgUrl: require('../images/color/be.png') },
    { value: 'BN', text: '棕色', imgUrl: require('../images/color/bn.png') },
    { value: 'GN', text: '绿色', imgUrl: require('../images/color/gn.png') },
    { value: 'MN', text: '两种以上', imgUrl: require('../images/color/mn.png') },
    { value: 'PU', text: '紫色', imgUrl: require('../images/color/pu.png') },
    { value: 'PR', text: '花纹图案', imgUrl: require('../images/color/pr.png') },
  ];
  static categoryArr = [
    {
      name: '不带拉链行李',
      valArr: [
        { value: '01', text: '横向设计的硬壳箱', imgUrl: require('../images/category/01.png') },
        { value: '02', text: '纵向设计的硬壳箱', imgUrl: require('../images/category/02.png') },
        { value: '03', text: '横向设计的不可伸缩硬壳箱', imgUrl: require('../images/category/03.png') },
        { value: '05', text: '横向设计的可伸缩箱', imgUrl: require('../images/category/05.png') },
        { value: '06', text: '扁平公文箱（包）', imgUrl: require('../images/category/06.png') },
        { value: '07', text: '文件箱', imgUrl: require('../images/category/07.png') },
        { value: '08', text: '军用背包', imgUrl: require('../images/category/08.png') },
        { value: '09', text: '洗衣布（塑料）袋', imgUrl: require('../images/category/09.png') },
        { value: '10', text: '纸箱', imgUrl: require('../images/category/10.png') },
        { value: '12', text: '储物箱', imgUrl: require('../images/category/12.png') },
      ]
    },
    {
      name: '带拉链行李',
      valArr: [
        { value: '20', text: '旅行衣袋/西装衣袋', imgUrl: require('../images/category/20.png') },
        { value: '22', text: '纵向设计的软箱', imgUrl: require('../images/category/22.png') },
        { value: '22D', text: '纵向设计的硬壳箱', imgUrl: require('../images/category/22d.png') },
        { value: '22R', text: '纵向设计的硬箱', imgUrl: require('../images/category/22r.png') },
        { value: '23', text: '横向设计的不可伸缩硬壳箱', imgUrl: require('../images/category/23.png') },
        { value: '25', text: '旅行/运动用提包', imgUrl: require('../images/category/25.png') },
        { value: '26', text: '电脑包/短途旅行提包', imgUrl: require('../images/category/26.png') },
        { value: '27', text: '纵向可伸缩提包', imgUrl: require('../images/category/27.png') },
        { value: '28', text: '编织袋', imgUrl: require('../images/category/28.png') },
        { value: '29', text: '双肩背包', imgUrl: require('../images/category/29.png') },
      ]
    },
    {
      name: '其他物品',
      valArr: [
        { value: '50', text: '帽盒', imgUrl: require('../images/category/50.png') },
        { value: '51', text: '邮包/邮袋/邮件盒', imgUrl: require('../images/category/51.png') },
        { value: '52', text: '旅行用衣箱/样品箱/展品箱', imgUrl: require('../images/category/52.png') },
        { value: '53', text: '带夹层的艺术作品包', imgUrl: require('../images/category/53.png') },
        { value: '54', text: '柱形纸筒（不含运动设备）', imgUrl: require('../images/category/54.png') },
        { value: '55', text: '免税品', imgUrl: require('../images/category/55.png') },
        { value: '56', text: '化妆箱', imgUrl: require('../images/category/56.png') },
        { value: '57', text: '宠物容器', imgUrl: require('../images/category/57.png') },
        { value: '58', text: '冰柜/冷却器', imgUrl: require('../images/category/58.png') },
        { value: '59', text: '工具箱', imgUrl: require('../images/category/59.png') },
        { value: '60', text: '鱼杆', imgUrl: require('../images/category/60.png') },
        { value: '61', text: '枪械', imgUrl: require('../images/category/61.png') },
        { value: '62', text: '高尔夫球袋', imgUrl: require('../images/category/62.png') },
        { value: '63', text: '自行车及/或配件', imgUrl: require('../images/category/63.png') },
        { value: '64', text: '睡袋/铺盖卷/帐篷', imgUrl: require('../images/category/64.png') },
        { value: '65', text: '冲浪设备', imgUrl: require('../images/category/65.png') },
        { value: '66', text: '滑雪橇', imgUrl: require('../images/category/66.png') },
        { value: '67', text: '滑雪板及滑板装置', imgUrl: require('../images/category/67.png') },
        { value: '68', text: '雪地靴/靴袋', imgUrl: require('../images/category/68.png') },
        { value: '69', text: '其他地方未显示的运动设备', imgUrl: require('../images/category/69.png') },
        { value: '71', text: '儿童/婴儿 汽车座椅', imgUrl: require('../images/category/71.png') },
        { value: '72', text: '其他地方未列明的儿童/婴儿用设施或设备', imgUrl: require('../images/category/72.png') },
        { value: '73', text: '所有类型的婴儿推车', imgUrl: require('../images/category/73.png') },
        { value: '74', text: '伞把婴儿推车', imgUrl: require('../images/category/74.png') },
        { value: '75', text: '带轮的运动器械', imgUrl: require('../images/category/75.png') },
        { value: '81', text: '音响/视听/照像设备', imgUrl: require('../images/category/81.png') },
        { value: '82', text: '计算机/通讯设备', imgUrl: require('../images/category/82.png') },
        { value: '83', text: '电子设备', imgUrl: require('../images/category/83.png') },
        { value: '85', text: '所有类别乐器', imgUrl: require('../images/category/85.png') },
        { value: '89', text: '折叠椅', imgUrl: require('../images/category/89.png') },
        { value: '90', text: '行李拉车', imgUrl: require('../images/category/90.png') },
        { value: '92', text: '安全原因限制携带的物品', imgUrl: require('../images/category/92.png') },
        { value: '93', text: '购物袋（任何材质）', imgUrl: require('../images/category/93.png') },
        { value: '94', text: '电动或手动轮椅及配件', imgUrl: require('../images/category/94.png') },
        { value: '95', text: '矫形装置', imgUrl: require('../images/category/95.png') },
        { value: '96', text: '床上用品袋', imgUrl: require('../images/category/96.png') },
        { value: '97', text: '潜水包及用具', imgUrl: require('../images/category/97.png') },
        { value: '98', text: '各种类型的雨伞', imgUrl: require('../images/category/98.png') },
        { value: '99', text: '上述未提及的物品', imgUrl: require('../images/category/99.png') },
      ]
    }
  ];
  static descArr = [
    {
      name: '材质',
      valArr: [
        { value: 'D', text: '软硬相间质地', imgUrl: require('../images/desc/d.png') },
        { value: 'L', text: '皮质包括人造革', imgUrl: require('../images/desc/l.png') },
        { value: 'M', text: '金属质地', imgUrl: require('../images/desc/m.png') },
        { value: 'R', text: '硬壳质地', imgUrl: require('../images/desc/r.png') },
        { value: 'T', text: '粗格呢', imgUrl: require('../images/desc/t.png') },
        { value: 'X', text: '无外部描述项', imgUrl: require('../images/desc/x.png') },
      ]
    },
    {
      name: '基本特征',
      valArr: [
        { value: 'B', text: '盒内装单件物品', imgUrl: require('../images/desc/b.png') },
        { value: 'K', text: '客舱尺寸', imgUrl: require('../images/desc/k.png') },
        { value: 'X', text: '无外部描述项', imgUrl: require('../images/desc/x.png') },
      ]
    },
    {
      name: '外部特征',
      valArr: [
        { value: 'C', text: '密码锁', imgUrl: require('../images/desc/c.png') },
        { value: 'H', text: '伸缩拉杆', imgUrl: require('../images/desc/h.png') },
        { value: 'S', text: '行李箱搭扣或打包带', imgUrl: require('../images/desc/s.png') },
        { value: 'W', text: '轮子', imgUrl: require('../images/desc/w.png') },
        { value: 'X', text: '无外部描述项', imgUrl: require('../images/desc/x.png') },
      ]
    }
  ];
}

const CTSelect = props => {

  const { modalVisible, onCancel, onSubmit, CTType, CTVal } = props;

  const [colorSelectVal, setColorSelectVal] = useState(''); // 颜色
  const [categorySelectVal, setCategorySelectVal] = useState(''); // 类别
  const [descSelectVal, setDescSelectVal] = useState(['', '', '']); // 描述

  useEffect(() => {
    if (modalVisible) {
      if (CTType === 1) {
        setColorSelectVal(CTVal);
      }
      if (CTType === 2) {
        setCategorySelectVal(CTVal);
      }
      if (CTType === 3) {
        setDescSelectVal(CTVal);
      }
    }
  }, [CTType, CTVal, modalVisible]);

  const colorSelect = useCallback(val => {
    setColorSelectVal(val);
  }, []);

  const categorySelect = useCallback(val => {
    setCategorySelectVal(val);
  }, []);

  const descSelect = useCallback((val, index) => {
    let arr = descSelectVal;
    arr[index] = val;
    setDescSelectVal([...arr]);
  }, [descSelectVal]);

  const okHandle = () => {
    if (CTType === 1) {
      onSubmit(colorSelectVal);
    }
    if (CTType === 2) {
      onSubmit(categorySelectVal);
    }
    if (CTType === 3) {
      let isChange = false;
      for (let item of descSelectVal) {
        if (!item) {
          isChange = true;
          break;
        }
      }
      if (isChange) {
        message.warning('必须三种描述均已选择');
      } else {
        onSubmit(descSelectVal);
      }
    }
  };

  return (
    <Modal
      destroyOnClose
      title={`行李${PrivateData.typeMap.get(CTType || 1).text}`}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={onCancel}
      width={PrivateData.typeMap.get(CTType || 1).width}
      maskClosable={false}
    >
      <div className={styles.CTSelectBox}>
        {/* 颜色 */}
        {CTType === 1 && <div className={styles.colorBox}>
          {PrivateData.colorArr.map((item, index) => (
            <div key={index}>
              <div>{item.value}</div>
              <Popover content={
                <>
                  <div className={styles.CTSelectBoxTitle}>{item.text}</div>
                  <img src={item.imgUrl} style={{ maxHeight: '85px'}} />
                </>
              }>
                <div
                  className={`${styles.boxItem} ${colorSelectVal === item.value ? styles.boxItemActive : ''}`}
                  onClick={() => colorSelect(item.value)}>
                  <img src={item.imgUrl} />
                </div>
              </Popover>
            </div>
          ))}
        </div>}
        {/* 类别 */}
        {CTType === 2 && <div className={styles.categoryBox}>
          {PrivateData.categoryArr.map((item, index) => (
            <fieldset key={index} className={styles.fieldsetBox}>
              <legend className={styles.legendBox}>{item.name}</legend>
              <div className={styles.categoryBoxItem}>
                {item.valArr.map((m, n) => (
                  <div key={n}>
                    <div>{m.value}</div>
                    <Popover content={
                      <>
                        <div className={styles.CTSelectBoxTitle}>{m.text}</div>
                        <img src={m.imgUrl} style={{ maxHeight: '145px'}} />
                      </>
                    }>
                      <div onClick={() => categorySelect(m.value)}>
                        <img src={m.imgUrl} className={`${styles.boxItem} ${categorySelectVal === m.value ? styles.boxItemActive : ''}`} />
                      </div>
                    </Popover>
                  </div>
                ))}
              </div>
            </fieldset>
          ))}
        </div>}
        {/* 描述 */}
        {CTType === 3 && <div className={styles.descBox}>
          <div className={styles.descTitle}>描述必须选择三种</div>
          {PrivateData.descArr.map((item, index) => (
            <fieldset key={index} className={styles.fieldsetBox}>
              <legend className={styles.legendBox}>{item.name}</legend>
              <div className={styles.descBoxItem}>
                {item.valArr.map((m, n) => (
                  <div key={n}>
                    <div>{m.value}</div>
                    <Popover content={
                      <>
                        <div className={styles.CTSelectBoxTitle}>{m.text}</div>
                        <img src={m.imgUrl} style={{ maxHeight: '100px'}} />
                      </>
                    }>
                      <div onClick={() => descSelect(m.value, index)}>
                        <img src={m.imgUrl} className={`${styles.boxItem} ${descSelectVal[index] === m.value ? styles.boxItemActive : ''}`} />
                      </div>
                    </Popover>
                  </div>
                ))}
              </div>
            </fieldset>
          ))}
        </div>}
      </div>
    </Modal>
  )
};

export default CTSelect;

